<template>
  <div>
    <a-form ref="queryOnlineFormRef" name="queryOnlineForm" :model="queryOnlineForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="title" label="登录地址">
            <a-input v-model:value="queryOnlineForm.data.ipaddr" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="title" label="用户名称">
            <a-input v-model:value="queryOnlineForm.data.userName" allowClear></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" @click="onlineTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetOnlineQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="operId"
      :columns="onlineTableData.columns"
      :data-source="onlineTableData.dataSource"
      :loading="onlineTablePage.loading.value"
      :pagination="onlineTablePagination"
      @change="onlineTableHandChangePage"
      :row-selection="{ selectedRowKeys: onlineTableData.selectedRowKeys, onChange: onOnlineTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'loginTime'">
          <span> {{ AutoeeUtil.parseDateTime(record.loginTime) }} </span>
        </template>
        <template v-else-if="column.key === 'onlineTableOperateCol'">
          <span>
            <a @click="clickForceLogout(record)"> 强退 </a>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup name="Online">
import { list, forceLogout } from '@/api/monitor/online';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysOperTypeDict: [],
  sysCommonStatusDict: [],
});

AutoeeUtil.getDictsByType('sys_oper_type').then((res) => {
  pageData.sysOperTypeDict = res;
});
AutoeeUtil.getDictsByType('sys_common_status').then((res) => {
  pageData.sysCommonStatusDict = res;
});

// 查询Form
const queryOnlineFormRef = ref();
const queryOnlineForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetOnlineQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryOnlineForm.data);
  onlineTablePage.reload();
};

// 点击强退
const clickForceLogout = (row) => {
  AutoeeUtil.confirmOperate('强退', () => {
    forceLogout(row.tokenId)
      .then(() => {
        AutoeeUtil.messageSuccess('强退操作成功。');
        onlineTablePage.reload();
      })
      .catch(() => {});
  });
};

// 列表数据
const onlineTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '会话编号',
      key: 'tokenId',
      dataIndex: 'tokenId',
      ellipsis: true,
    },
    {
      title: '登录名称',
      key: 'userName',
      dataIndex: 'userName',
    },
    {
      title: '部门名称',
      key: 'deptName',
      dataIndex: 'deptName',
    },
    {
      title: '登录地址',
      key: 'ipaddr',
      dataIndex: 'ipaddr',
    },
    {
      title: '登录地点',
      key: 'loginLocation',
      dataIndex: 'loginLocation',
    },
    {
      title: '浏览器',
      key: 'browser',
      dataIndex: 'browser',
    },
    {
      title: '操作系统',
      key: 'os',
      dataIndex: 'os',
    },
    {
      title: '登录时间',
      key: 'loginTime',
      dataIndex: 'loginTime',
    },
    {
      title: '操作',
      key: 'onlineTableOperateCol',
      width: 100,
    },
  ],
});

// 查询用户列表
const queryOnlineList = () => {
  return list(queryOnlineForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const onlineTablePage = AutoeeUtil.usePagination(queryOnlineList, onlineTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const onlineTablePagination = computed(() => AutoeeUtil.getTablePagination(onlineTablePage));

// 手动翻页方法
const onlineTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(onlineTablePage, page, filters, sorter);
};

// 列表选中方法
const onOnlineTableSelectChange = (selectedRowKeys, selectedRows) => {
  onlineTableData.selectedRowKeys = selectedRowKeys;
  // console.log('selectedRows[0].dictType=' + JSON.stringify(selectedRows[0].dictType));
};
</script>
<style lang="less"></style>
